<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="content">
        <div class="Container100 ui-fluid">
            <div class="Card">
                <h1 class="CardBigTopic TexAlCenter">DataTable</h1>
                <div class="SeparatorFull"/>
                <h:form id="form">
                    <p:dataTable id="singleDT"
                                 var="car"
                                 value="#{dtSelectionView.cars1}"
                                 reflow="true"
                                 rows="10"
                                 paginator="true"
                                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                 currentPageReportTemplate="({currentPage} of {totalPages})"
                                 rowsPerPageTemplate="5,10,15"
                                 selectionMode="single"
                                 selection="#{dtSelectionView.selectedCar}"
                                 rowKey="#{car.id}">

                        <p:ajax event="rowSelect" update=":form:carDetail" oncomplete="PF('carDialog').show()"/>

                        <f:facet name="header">
                            Car Sales Ranks
                        </f:facet>

                        <p:column headerText="Id" footerText="Id" sortBy="#{car.id}">
                            <h:outputText value="#{car.id}" />
                        </p:column>

                        <p:column headerText="Year" footerText="Year" sortBy="#{car.year}">
                            <h:outputText value="#{car.year}" />
                        </p:column>

                        <p:column headerText="Brand" footerText="Brand" sortBy="#{car.brand}">
                            <h:outputText value="#{car.brand}" />
                        </p:column>

                        <p:column headerText="Color" footerText="Color" sortBy="#{car.color}">
                            <h:outputText value="#{car.color}" />
                        </p:column>
                    </p:dataTable>

                    <p:dialog header="Car Info"
                              widgetVar="carDialog"
                              modal="true"
                              showEffect="fade"
                              hideEffect="fade"
                              resizable="false"
                              responsive="true">
                        <p:outputPanel id="carDetail" style="text-align:center;">
                            <p:panelGrid columns="2"
                                         layout="grid"
                                         styleClass="ui-panelgrid-blank"
                                         rendered="#{not empty dtSelectionView.selectedCar}">
                                <f:facet name="header">
                                    <p:graphicImage name="demo/images/car/#{dtSelectionView.selectedCar.brand}-big.gif"/>
                                </f:facet>

                                <h:outputText value="Id:" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.id}" />

                                <h:outputText value="Year" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.year}" />

                                <h:outputText value="Color:" style="font-weight: bold"/>
                                <h:outputText value="#{dtSelectionView.selectedCar.color}" style="color:#{dtSelectionView.selectedCar.color}"/>

                                <h:outputText value="Price" style="font-weight: bold"/>
                                <h:outputText value="\$#{dtSelectionView.selectedCar.price}" />
                            </p:panelGrid>
                        </p:outputPanel>
                    </p:dialog>
                </h:form>
                <!--<form id="form" name="form" method="post" action="/olympos/datatable.xhtml" enctype="application/x-www-form-urlencoded">
                <input type="hidden" name="form" value="form" />
                <div id="form:singleDT" class="ui-datatable ui-widget ui-datatable-reflow"><div class="ui-datatable-header ui-widget-header ui-corner-top">
                                            Car Sales Ranks
                                        </div><div id="form:singleDT_paginator_top" class="ui-paginator ui-paginator-top ui-widget-header" role="navigation"><span class="ui-paginator-current">(1 of 5)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span><select id="form:singleDT_rppDD" name="form:singleDT_rppDD" class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" autocomplete="off"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></div><div class="ui-datatable-tablewrapper"><table role="grid"><thead id="form:singleDT_head"><tr role="row"><th id="form:singleDT:j_idt19" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Id</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt21" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Year</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt23" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Brand</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th><th id="form:singleDT:j_idt25" class="ui-state-default ui-sortable-column" role="columnheader"><span class="ui-column-title">Color</span><span class="ui-sortable-column-icon ui-icon ui-icon-carat-2-n-s"></span></th></tr></thead><tfoot id="form:singleDT_foot"><tr><td class="ui-state-default">Id</td><td class="ui-state-default">Year</td><td class="ui-state-default">Brand</td><td class="ui-state-default">Color</td></tr></tfoot><tbody id="form:singleDT_data" class="ui-datatable-data ui-widget-content"><tr data-ri="0" data-rk="b942c432" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">b942c432</td><td role="gridcell">1986</td><td role="gridcell">Honda</td><td role="gridcell">Blue</td></tr><tr data-ri="1" data-rk="b6750ea3" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">b6750ea3</td><td role="gridcell">1970</td><td role="gridcell">Honda</td><td role="gridcell">Brown</td></tr><tr data-ri="2" data-rk="22aad735" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">22aad735</td><td role="gridcell">1980</td><td role="gridcell">Volvo</td><td role="gridcell">Orange</td></tr><tr data-ri="3" data-rk="92f18c9b" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">92f18c9b</td><td role="gridcell">1999</td><td role="gridcell">Renault</td><td role="gridcell">Brown</td></tr><tr data-ri="4" data-rk="b8675d00" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">b8675d00</td><td role="gridcell">1967</td><td role="gridcell">Jaguar</td><td role="gridcell">Blue</td></tr><tr data-ri="5" data-rk="e83f3ea7" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">e83f3ea7</td><td role="gridcell">1990</td><td role="gridcell">Mercedes</td><td role="gridcell">Silver</td></tr><tr data-ri="6" data-rk="67b2eec2" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">67b2eec2</td><td role="gridcell">1974</td><td role="gridcell">BMW</td><td role="gridcell">Yellow</td></tr><tr data-ri="7" data-rk="d8cd9c63" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">d8cd9c63</td><td role="gridcell">1981</td><td role="gridcell">Volkswagen</td><td role="gridcell">Green</td></tr><tr data-ri="8" data-rk="1e2b8d81" class="ui-widget-content ui-datatable-even ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">1e2b8d81</td><td role="gridcell">1966</td><td role="gridcell">Mercedes</td><td role="gridcell">Orange</td></tr><tr data-ri="9" data-rk="0d0e58ca" class="ui-widget-content ui-datatable-odd ui-datatable-selectable" role="row" aria-selected="false"><td role="gridcell">0d0e58ca</td><td role="gridcell">1987</td><td role="gridcell">Volvo</td><td role="gridcell">Silver</td></tr></tbody></table></div><div id="form:singleDT_paginator_bottom" class="ui-paginator ui-paginator-bottom ui-widget-header ui-corner-bottom" role="navigation"><span class="ui-paginator-current">(1 of 5)</span> <span class="ui-paginator-first ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-first">p</span></span><span class="ui-paginator-prev ui-state-default ui-corner-all ui-state-disabled"><span class="ui-icon ui-icon-seek-prev">p</span></span><span class="ui-paginator-pages"><span class="ui-paginator-page ui-state-default ui-state-active ui-corner-all" tabindex="0">1</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">2</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">3</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">4</span><span class="ui-paginator-page ui-state-default ui-corner-all" tabindex="0">5</span></span><span class="ui-paginator-next ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-next">p</span></span><span class="ui-paginator-last ui-state-default ui-corner-all" tabindex="0"><span class="ui-icon ui-icon-seek-end">p</span></span><select id="form:singleDT_rppDD" name="form:singleDT_rppDD" class="ui-paginator-rpp-options ui-widget ui-state-default ui-corner-left" autocomplete="off"><option value="5">5</option><option value="10" selected="selected">10</option><option value="15">15</option></select></div><input type="hidden" id="form:singleDT_selection" name="form:singleDT_selection" autocomplete="off" value="" /></div><script id="form:singleDT_s" type="text/javascript">$(function(){PrimeFaces.cw("DataTable","widget_form_singleDT",{id:"form:singleDT",paginator:{id:['form:singleDT_paginator_top','form:singleDT_paginator_bottom'],rows:10,rowCount:50,page:0,currentPageTemplate:'({currentPage} of {totalPages})'},selectionMode:"single",reflow:true,behaviors:{rowSelect:function(ext,event) {PrimeFaces.ab({s:"form:singleDT",e:"rowSelect",p:"form:singleDT",u:"form:carDetail",onco:function(xhr,status,args){PF('carDialog').show();}},ext);}}});});</script><div id="form:j_idt27" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow ui-hidden-container"><div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"><span id="form:j_idt27_title" class="ui-dialog-title">Car Info</span><a href="#" class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></a></div><div class="ui-dialog-content ui-widget-content"><div id="form:carDetail" class="ui-outputpanel ui-widget" style="text-align:center;"></div></div></div><script id="form:j_idt27_s" type="text/javascript">$(function(){PrimeFaces.cw("Dialog","carDialog",{id:"form:j_idt27",resizable:false,modal:true,showEffect:"fade",hideEffect:"fade",responsive:true});});</script><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:41" value="4164763141833909606:-5674480193196187302" autocomplete="off" />
                </form>-->
            </div>
        </div>
    </ui:define>
</ui:composition>